<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
	width: 620px;
	border: 3px solid #ccc;
	border-collapse: collapse;
	margin: 0 auto;
	margin-top: 20px;
}

table th, table td {
	border: 1px solid #ccc;
}

div.page-bar a {
	display: inline-block;
	margin-right: 3px;
}

div.go-bar input {
	width: 30px;
}
</style>
<script src="/mvc-demo08/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$(function() {
		//页面加载完毕后执行
		$.ajax({
			/* 请求路径 RequestMapping*/
			url : "/mvc-demo08/emp/list",
			/*请求类型  Get Post Put Delete  restful*/
			type : "GET",
			/*服务器返回的数据类型*/
			dataType : "JSON",
			/*请求成功后执行的函数*/
			success : function(data) {//data是服务器返回的数据
				loadTable(data);
			},
			error : function(error) {
				alert("请求数据失败");
			}

		});
	});

	//声明一个全局的变量保存当前的pageBean
	var pb; //在script里面所有的地方都可以调用

	//页码加载数据
	function loadTable(data) {
		pb = data.pageBean;
		//清空原来的数据  gt  greater than
		//清空员工数据
		$("table tr:gt(0)").remove();
		//清空页码
		$("div.page-bar a").remove();
		//加载新的数据
		console.log(data);
		var pageBean = data.pageBean
		var es = pageBean.list;
		//员工数据
		for (var i = 0; i < es.length; i++) {
			var e = es[i];
			//处理部门和经理为null的情况
			var dname = e.dept == null ? '' : e.dept.dname;
			var mname = e.mgr == null ? '' : e.mgr.ename;

			var $tr = $("<tr><td>" + e.empno + "</td><td>" + e.ename + "</td>"
					+ "<td>" + e.esex + "</td><td>" + e.eage + "</td>" + "<td>"
					+ e.esalary + "</td><td>" + dname + "</td>" + "<td>"
					+ mname + "</td>"
					+ "<td><a href='#'>修改</a><a href='#'>删除</a></td></tr>");
			$("table").append($tr);
		}
		//页码
		//首页
		$("div.page-bar").append("<a href='javascript:changePage(1);'>首页</a>");
		//上一页
		$("div.page-bar").append(
				"<a href='javascript:changePage(" + pageBean.previousPage
						+ ");'>上一页</a>");
		//数字页码
		for (var i = 1; i <= pageBean.last; i++) {
			$("div.page-bar")
					.append(
							"<a href='javascript:changePage(" + i + ");'>" + i
									+ "</a>");
		}
		//下一页
		$("div.page-bar").append(
				"<a href='javascript:changePage(" + pageBean.nextPage
						+ ");'>下一页</a>");
		//尾页
		$("div.page-bar").append(
				"<a href='javascript:changePage(" + pageBean.last
						+ ");'>尾页</a>");
		//刷新总页数
		$("#totalPages").html(pageBean.totalPages);

	}

	//跳转页面
	function changePage(no) {
		//获得表单dom对象
		$("#searchForm  input[name=pageNo]").val(no);
		//使用ajax提交表单
		$.ajax({
			url : "/mvc-demo08/emp/list",
			type : "POST",
			data : $("#searchForm").serializeArray(),
			dataType : "JSON",
			success : function(data) {
				loadTable(data);
			},
			error : function(error) {
				alert("请求数据失败...");
			}
		});
	}

	function doSearch() {
		$("#searchForm input[name=pageNo]").val(1);
		$.ajax({
			url:"/mvc-demo08/emp/list",
			type:"",
			data:$("#searchForm").serializeArray(),
			dataType:"JSON",
			success(data){
				loadTable(data);
			},
			error:function(error){
				alert("查询数据失败");
			}
		});
	}

	//输入页码,跳转到指定的页面
	function goPage() {
		//获得用户输入的页码
		var no = $("div.go-bar input[name=goNo]").val();
		if (no<1 || no>pb.last || isNaN(no)) {
			alert("请输入正确的页码");
			//清空goNo input框
			$("div.go-bar input[name=goNo]").val("");
			return;
		}
		changePage(no);
	}
</script>
</head>
<body>
	<p align="center">员工列表</p>
	<p align="center">
		<a href="#">添加员工</a>
	</p>
	<div align="center">
		<form id="searchForm">
			<input name="pageNo" type="hidden" value="1" /> <input
				name="pageCondition" /> <select name="pageSize">
				<option value="3">3</option>
				<option value="5">5</option>
				<option value="10">10</option>
			</select> <input type="submit" value="搜索" />
		</form>
	</div>
	<table>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>薪资</th>
			<th>部门</th>
			<th>经理</th>
			<th>操作</th>
		</tr>
	</table>
	<div class="page-bar" align="center"></div>
	<div align="center" class="go-bar">
		<button onclick="goPage()">go</button>
		第 <input name="goNo" />页/共<span id="totalPages"></span>
	</div>
</body>
</html>